<template>
  <div>
    <el-menu
      :default-active="defaultActiveIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">边缘网络拓扑总图</el-menu-item>
      <el-menu-item index="2">资源-业务映射关系详情</el-menu-item>
      <!-- <el-menu-item index="3">关注列表</el-menu-item>
      <el-menu-item index="4">我的发布</el-menu-item>
      <el-menu-item index="5" disabled>待定</el-menu-item> -->
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "TopMenu",
  props: {
    defaultActiveIndex: {
      type: String,
      required: true,
    },
  },

  data() {
    return {};
  },
  methods: {
    handleSelect(value) {
      //这一句修改的是父组件的activeIndex，并没有对当前组件的this.defaultActiveIndex进行修改
      this.$emit("update:defaultActiveIndex", value);
    },
  },
};
</script>
<style>
</style>
